<template>
	<view class="withdrawalRecordsPage">
		<view class="withdrawalRecordsTop flex-between">
			<view class="search-content">

				<image class="search-img" src="../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入订单号,商品号" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
			<view class="">
				<image class="timeImg" src="../../static/会员卡管理端/path (2).png" mode=""></image>
			</view>
		</view>
		<view style="padding: 0rpx  30rpx">
			<view class="flex-between margin_20rpx_0">


			</view>
			<view class="flex-between margin_20rpx_0" style="color: rgb(153, 153, 153);">
				<text>本月累计：3632413.32</text>
				<text>优惠金额：363</text>
			</view>
		</view>
		<view class="padding_20rpx">
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item,index) in list" :key="index">
					<view class="withdrawalRecordsList">
						<view class="padding-bottom_20rpx  flex-between">
							<text style="color: rgb(117, 117, 117);">时间：{{item.create_time}}</text>
							<text style="color: rgb(255, 0, 0);" class=" flex">会员卡：13584847814</text>
						</view>
						<view class="flex-between padding-top_20rpx   ">
							<view class="flex">
								<image class="image" src="../../static/会员卡管理端/组合 309.png" mode=""></image>
								<view class="flex-columns-center margin-left_30rpx">
									<text class="font-weight_bold margin-bottom_10rpx" style="font-size: 30rpx;">
										{{item.coupon_name}}</text>

									<text
										style="color: rgb(153, 153, 153);;font-size: 24rpx;text-align: left;">{{item.desc}}
									</text>
								</view>
							</view>

							<view class="flex-column-end margin-left_30rpx  ">
								<text class="font-weight_bold margin-bottom_10rpx" style="font-size: 30rpx;">￥{{item.discount_intensity}}</text>

								<text style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">实付金额：{{item.trigger_amount}}
								</text>
							</view>

						</view>

					</view>
				</block>
			</mescroll-body>


		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				searchVal: '',
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				uid:''
			}
		},
		onLoad(options) {
			console.log(options)
			this.uid=options.id
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},
				
			});
			
		},
		onShow() {
			this.mescroll?.resetUpScroll();
			
		},
		methods: {
             async upCallback(scroll) {
             
             	const result = await this.$http.post({
             		url: this.$api.userCouponList,
             		data: {
                         page: scroll.num,
						 limit:10,
						 uid:31
             
             		},
             		headers: {
             			'Authorization': `Bearer ${this.token}`
             		}
             
             	})
             	if (result.code == 0) {
             		console.log('地址管理列表', result);
             		this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
             		if (scroll.num == 1) this.list = [];
             		this.list = this.list.concat(result.data.list);
             		console.log('this.list', this.list, this.list.length);
             	}
             },
		}
	}
</script>

<style lang="less" scoped>
	.withdrawalRecordsPage {
		.withdrawalRecordsTop {
			.timeImg {
				width: 40rpx;
				height: 40.94rpx;
				margin-left: 5rpx;
				margin-right: 15rpx;
			}

			background: rgb(255, 255, 255);

			padding: 34rpx;
			// border-radius: 130rpx;


			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				width: 586rpx;
				height: 88rpx;

				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}

		.withdrawalRecordsList {
			margin-bottom: 26rpx;
			position: relative;

			.application {
				position: absolute;
				width: 116rpx;
				height: 52rpx;
				right: 0;
				top: 0;
				border-radius: 8rpx 20rpx 0rpx 20rpx;
				color: rgb(255, 255, 255);
				background: rgb(42, 137, 255);
			}

			.reject {
				position: absolute;
				width: 116rpx;
				height: 52rpx;
				right: 0;
				top: 0;
				border-radius: 4px 10px 0px 10px;
				color: rgb(255, 255, 255);

				background: rgb(255, 0, 0);
			}

			.payment {
				position: absolute;
				width: 116rpx;
				height: 52rpx;
				right: 0;
				top: 0;
				border-radius: 4px 10px 0px 10px;
				color: rgb(153, 153, 153);

				background: rgb(240, 240, 240);
			}

			border-radius: 10rpx;

			background: rgb(255, 255, 255);
			padding: 30rpx;

			.image {
				width: 84rpx;
				height: 84rpx;
			}

			.wxImg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}

			.check {
				width: 104rpx;
				height: 48rpx;
				border-radius: 12rpx;
				color: rgb(255, 255, 255);
				background: rgb(42, 137, 255);
				font-size: 24rpx;
			}

			.delete {
				width: 104rpx;
				height: 48rpx;
				border-radius: 12rpx;
				color: rgb(255, 255, 255);
				background: rgb(255, 0, 0);
				font-size: 24rpx;
			}
		}

		.month {}

	}

	page {
		background: #f6f6f6;
	}
</style>